<template>
  <div class="app-container">
    <el-form ref="postForm" class="form-container" :model="postForm" :rules="rules" style="margin: 1vh 2vw;" :label-position="device() === 'mobile' ? 'top' : 'left'" :size="handleSize()">
      <el-row>
        <el-form-item prop="title">
          <MDInput class="el-input" v-model="postForm.title" :maxlength="100" name="name" required>
            活动标题
          </MDInput>
        </el-form-item>

        <el-row>
          <el-col :xs="24" :sm="18" :md="16" :lg="12" :xl="8">
            <el-form-item label="活动地点" label-width="100px" style="width: 30vh" prop="zone">
              <el-input v-model="postForm.zone" :size="handleSize()"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row v-show="device() === 'mobile'">
          <el-col :xs="24" :sm="24" :md="16" :lg="12" :xl="12">
            <el-form-item v-for="item in inputMap" :label="item.label" label-width="100px" :prop="item.prop">
              <el-date-picker
                v-model="item.model"
                type="datetime"
                format="yyyy-MM-dd HH:mm:ss"
                :placeholder="item.placeholder"
                style="width: 30vh"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row v-show="device() !== 'mobile'">
          <el-col :xs="24" :sm="18" :md="16" :lg="12" :xl="10">
            <el-form-item label="活动时间" label-width="100px" prop="activityTime">
                <el-date-picker
                  ref="datePicker"
                  v-model="activityTime"
                  type="datetimerange"
                  format="yyyy-MM-dd HH:mm:ss"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :size="handleSize()">
                </el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :xs="18" :sm="18" :md="16" :lg="12" :xl="10">
            <el-form-item label="报名时间" label-width="100px" prop="enrollTime">
                <el-date-picker
                  ref="datePicker"
                  v-model="enrollTime"
                  format="yyyy-MM-dd HH:mm:ss"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :size="handleSize()">
                </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :xs="18" :sm="18" :md="16" :lg="12" :xl="8">
            <el-form-item label="人数限制" label-width="100px" prop="count">
              <el-input-number v-model="postForm.count" :min="1" :max="2000" label="Count" style="width: 200px" :size="handleSize()"/>
              <el-tooltip v-show="device() !== 'mobile'" effect="light" content="默认活动限制人数为500人" placement="right" transition="el-zoom-in-center">
                <i class="el-icon-info" style="margin-left: 0.8vw"/>
              </el-tooltip>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="活动类型" label-width="100px" prop="type">
          <el-radio-group class="hidden-lg-and-down" v-model="postForm.type" :size="handleSize()">
            <el-radio v-for="item in type" :label="item" name="type" border :size="handleSize()"/>
          </el-radio-group>

          <el-select class="hidden-xl-only" v-model="postForm.type" clearable :size="handleSize()" placeholder="">
            <el-option v-for="item in type" :key="item" :value="item" :label="item" :size="handleSize()" />
          </el-select>
        </el-form-item>

        <el-form-item label="学院限制" label-width="100px" prop="college">
          <ELDragSelect v-model="postForm.college" style="width: 100%;" multiple placeholder="请选择可以参加活动的学院">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </ELDragSelect>
        </el-form-item>

        <el-form-item prop="firstImage">
          <div class="editor-container">
            <dropzone :acceptedFiles="postForm.firstImage"  id="myVueDropzone" ref="dropzone" url="https://httpbin.org/post" :max-filesize="1024*64" :max-files="1" @dropzone-removedFile="dropzoneR" @dropzone-success="dropzoneS" />
          </div>
        </el-form-item>

        <el-form-item prop="content" style="margin-bottom: 3vh;">
          <Tinymce v-show="device() !== 'mobile'" ref="editorTinymce" v-model="postForm.content" :height="260" />
          <el-input v-show="device() === 'mobile'" ref="editorText" type="textarea" :rows="20" placeholder="请输入内容" v-model="postForm.content" />
        </el-form-item>

        <el-row type="flex" justify="end">
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
          <el-button @click="onCancel">重置</el-button>
        </el-row>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import ElFormItem from 'element-ui/packages/form/src/form-item.vue'
import MDInput from '@/components/MDInput/index.vue'
import Tinymce from '@/components/Tinymce/index.vue'
import Dropzone from '@/components/Dropzone/index.vue'
import ELDragSelect from '@/components/DragSelect/index.vue'
import 'element-ui/lib/theme-chalk/display.css'
import { createActivity, getAdmin } from '@/api/user/actiityAdmin'
import { getAdminActivityAdmin } from '@/api/admin/activityAdmin'

const defaultForm = {
  id: undefined,
  createdAt: undefined,
  updatedAt: undefined,
  deletedAt: undefined,
  adminId: '',
  title: '',
  zone: '',
  type: '',
  activityStart: '',
  activityEnd: '',
  enrollStart: '',
  enrollEnd: '',
  count: undefined,
  college: ['管理学院', '经济学院', '珠宝学院', '建筑学院', '外国语学院', '国际商学院', '电气工程学院', '土木工程学院',
    '汽车与交通工程学院', '计算机工程学院暨大数据学院', '机械工程学院暨机器人工程学院', '电子信息学院暨中兴通讯工程学院'],
  firstImage: '',
  content: '',
  status: 0,
  isOpen: 0,
  admin_id: 0,
}

export default {
  components: {
    MDInput,
    Tinymce,
    Dropzone,
    ElFormItem,
    ELDragSelect
  },
  data() {
    // 验证标题
    const validateTitleRequire = (rule, value, callback) => {
      if (value === '') {
        this.$message({
          message: '标题为必填项',
          type: 'error'
        })
        callback(new Error('标题为必填项'))
      } else {
        callback()
      }
    }
    // 验证地点
    const validateZoneRequire = (rule, value, callback) => {
      if (value === '') {
        this.$message({
          message: '地点为必填项',
          type: 'error'
        })
        callback(new Error('地点为必填项'))
      } else {
        callback()
      }
    }
    // 验证活动类型
    const validateTypeRequire = (rule, value, callback) => {
      if (value === '') {
        this.$message({
          message: '活动类型为必选',
          type: 'error'
        })
        callback(new Error('活动类型为必选'))
      } else {
        callback()
      }
    }
    // 验证活动封面
    const validateDropzoneRequire = (rule, value, callback) => {
      if (value === '') {
        this.$message({
          message: '活动封面为必填',
          type: 'error'
        })
        callback(new Error('活动封面为必填'))
      } else {
        callback()
      }
    }
    // 验证活动内容
    const validateContentRequire = (rule, value, callback) => {
      if (value === '') {
        this.$message({
          message: '活动内容为必填',
          type: 'error'
        })
        callback(new Error('活动内容为必填'))
      } else {
        callback()
      }
    }
    return {
      postForm: Object.assign({}, defaultForm),
      activityTime: [],
      enrollTime: [],
      options: [
        { value: '管理学院', label: '管理学院' },
        { value: '经济学院', label: '经济学院' },
        { value: '珠宝学院', label: '珠宝学院' },
        { value: '建筑学院', label: '建筑学院' },
        { value: '外国语学院', label: '外国语学院' },
        { value: '国际商学院', label: '国际商学院' },
        { value: '电气工程学院', label: '电气工程学院' },
        { value: '土木工程学院', label: '土木工程学院' },
        { value: '汽车与交通工程学院', label: '汽车与交通工程学院' },
        { value: '计算机工程学院暨大数据学院', label: '计算机工程学院暨大数据学院' },
        { value: '机械工程学院暨机器人工程学院', label: '机械工程学院暨机器人工程学院' },
        { value: '电子信息学院暨中兴通讯工程学院', label: '电子信息学院暨中兴通讯工程学院' }
      ],
      inputMap: [
        { model: 'postForm.activityStart', label: '活动开始时间' , prop: 'activityStart', placeholder: '选择活动开始时间'},
        { model: 'postForm.activityEnd', label: '活动结束时间' , prop: 'activityEnd', placeholder: '选择活动结束时间'},
        { model: 'postForm.enrollStart', label: '报名开始时间' , prop: 'enrollStart', placeholder: '选择报名结束时间'},
        { model: 'post.enrollEnd', label: '报名开始时间' , prop: 'enrollEnd', placeholder: '选择报名结束时间'},
      ],
      rules: {
        title: [{ validator: validateTitleRequire, trigger: 'blur'  }],
        zone: [{ validator: validateZoneRequire, trigger: 'blur'  }],
        type: [{ validator: validateTypeRequire, trigger: 'change'  }],
        dropzone: [{ validator: validateDropzoneRequire, trigger: 'blur'}],
        content: [{ validator: validateContentRequire, trigger: 'blur'}]
      },
      type: ['政治学习', '志愿服务', '社会实践', '讲座学习', '校园文化', '就业讲座', '文艺活动', '学科竞赛', '服务性劳动'],
      college: ['管理学院', '经济学院', '珠宝学院', '建筑学院', '外国语学院', '国际商学院', '电气工程学院', '土木工程学院', '汽车与交通工程学院', '计算机工程学院暨大数据学院', '机械工程学院暨机器人工程学院', '电子信息学院暨中兴通讯工程学院'],
    }
  },
  methods: {
    // dropzone 上传事件
    dropzoneS(file) {
      console.log(file.dataURL)
      // 获取封面图片
      this.postForm.firstImage = file.dataURL
      this.$message({ message: '上传成功', type: 'success' })
    },
    // dropzone 删除事件
    dropzoneR(file) {
      console.log(file)
      this.$message({ message: '删除成功', type: 'success' })
    },
    // 返回当前 设备类型
    device() {
      return this.$store.state.app.device
    },
    // 根据当前设备 控制当前尺寸
    handleSize() {
      return this.$store.state.app.device === 'mobile' ? 'mini' : 'medium'
    },
    // 获取数据
    async getData() {
      if(this.postForm.activityTime !== '' || this.postForm.enrollTime !== '') {
        this.postForm.activityStart =this.activityTime[0]
        this.postForm.activityEnd =this.activityTime[1]
        this.postForm.enrollStart =this.enrollTime[0]
        this.postForm.enrollEnd =this.enrollTime[1]
      }
      if(this.postForm.count === undefined) {
        this.postForm.count = 500;
      }
      this.postForm.admin_id = 1
    },
    // 清空数据
    emptyData() {
      this.postForm = Object.assign({}, defaultForm)
      this.$refs.postForm.resetFields()
      this.$refs.editorTinymce.setContent('')
      this.$refs.editorText.clear()
      this.$refs.dropzone.removeAllFiles()
      this.activityTime = []
      this.enrollTime = []
    },
    // 提交活动
    onSubmit() {
      // 获取数据
      this.getData().then(() => {
        // admin_id
        // createActivity({ title: this.postForm.title, zone: this.postForm.zone,
        //   type: this.postForm.type, content: this.postForm.content, first_image: this.postForm.firstImage,
        //   activity_start: this.postForm.activityStart, activity_end: this.postForm.activityEnd,
        //   enroll_start:this.postForm.enrollStart, enroll_end:this.postForm.enrollEnd,
        //   college: this.postForm.college, count: this.postForm.count,
        //   admin_id: this.postForm.admin_id})
        this.$refs.postForm.validate(valid => {
          if (valid) {
            this.loading = true
            console.log(this.postForm)
            createActivity({ title: this.postForm.title, zone: this.postForm.zone,
              type: this.postForm.type, content: this.postForm.content, first_image: this.postForm.firstImage,
              activity_start: this.postForm.activityStart, activity_end: this.postForm.activityEnd,
              enroll_start:this.postForm.enrollStart, enroll_end:this.postForm.enrollEnd,
              college: this.postForm.college, count: this.postForm.count,
              admin_id: this.postForm.admin_id}
            ).then(() => {
              this.$notify({
                title: '成功',
                message: '发布活动成功',
                type: 'success',
                duration: 2000
              })
            })
          } else {
            console.log('发布失败!!')
            this.$notify({
              title: '失败',
              message: '发布活动失败',
              type: 'danger',
              duration: 2000
            })
            this.loading = false
          }
        })
      })
    },
    // 重置内容
    onCancel() {
      // 清空数据
      this.emptyData()
      this.$notify({
        title: '成功',
        message: '重置成功',
        type: 'success',
        duration: 2000
      })
    }
  }
}
</script>

<style scoped>
.app-container {
  margin-left: 2vw;
  margin-right: 2vw;

  .el-form-item__label{
    font-size: 16px;
    font-weight: 530;
    font-family: "微软雅黑",serif;
    letter-spacing: 1px;
  }

  .el-button {
    background-color: #419fff;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
    color: #fff;
    padding: 1.5vh 2vw;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 550;
    font-size: 1.2rem;
    border: none;
    border-radius: 5px;
    transition: all 0.3s ease 0s;
    cursor: pointer;
    outline: none;
    margin-left: 0.8vw;
  }

  .el-button:active {
    transform: translateY(-1px);
  }

  .el-button:hover {
    background-color: #fff;
    color: #000;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    transform: translateY(-7px);
  }
}
</style>

